<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>${course.title}</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />


<!--scrollable-->
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">


<!-- highlightjs -->
<link rel="stylesheet" href="ckeditor/plugins/codesnippet/lib/highlight/styles/rainbow.css">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">




<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<meta property="og:title" content="${course.title}">
<meta name="description" content="${course.gist}">
<link rel="image_src" href="https://s3-ap-northeast-1.amazonaws.com/proactive/${course.imagePath}" />

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body>
	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12">
							<div class="logo"><a href="course">美編網</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li>
									<a href="aboutme?id=${loginMember.memberNO}" class="loginImg">
										<img src="${loginMember.photoPath}">
									</a>
									<ul class="loginDropdown hide">
										<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
										<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>		
										<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
										<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>										
										<li><a href="logout">登出</a></li>
									</ul>
								</li>							
							</ul>
						</div>
					</div>
				</div>
				<div class="share clearfix">
					<div class="container">
						<!-- AddToAny share --> 
						<div class="grid_12 a2a_kit a2a_kit_size_32 a2a_default_style">
							<ul class="list-screen-condition">	
								<li class="social">
									<a class="a2a_button_facebook topShare">
										<img src="images/fb.png">
										<img src="images/fb2.png" class="fb2">
										<span>分享</span>
									</a>
								</li>
								<li class="social">
									<a href="javascript:;" class="a2a_button_google_plus topGoogle">
										<img src="images/google.png">
										<img src="images/google2.png" class="google2">
										<span>+1</span>
									</a>
								</li>
								<li class="social">
									<a href="javascript:;" class="topLove ${course.favoriteClass}" data-id="${course.id}" data-show="${course.favoriteFlag}" data-type="1" data-check="true">
										<img src="images/love.png" style="display:${course.favoriteString1};">
										<img src="images/love2.png" class="love2" style="display:${course.favoriteString2};">
										<span>喜愛</span>
									</a>
								</li>
								<li class="social">
									<a href="javascript:;" class="topCollect ${course.collectClass}" data-id="${course.id}" data-show="${course.collectFlag}" data-type="1" data-check="true">
										<img src="images/collect.png" style="display:${course.collectString1};">
										<img src="images/collect2.png" class="collect2" style="display:${course.collectString2};">
										<span class="collected">${course.collectString}</span>
									</a>
								</li>
								<!-- 
								<li class="social">
									<a href="javascript:;" class="topClassify topfocusClassify">
										<img alt="collect" src="images/classify.png">
										<span>分類</span>
									</a>
								</li> -->
							</ul>
							<script type="text/javascript"> 
				         		var a2a_config = a2a_config || {}; 
				         		a2a_config.locale = "zh-TW"; 
				         		a2a_config.linkurl = location.href; show_title=true; 
					        </script> 
					        <!-- AddToAny END -->
					        <c:if test="${course.downloadUrl != '' || course.fileUrl != ''}">
								<a href="${course.isFile==1?course.downloadUrl:course.fileUrl}" target="_blank" class="download"><button class="downloadButton">下載</button></a>
							</c:if>
							<c:if test="${course.demo != ''}">
								<a href="${course.demo}" target="_blank" class="download"><button class="viewButton">展示</button></a>
							</c:if>
							<c:if test="${course.writerFlag}">							
								<a href="modiCourseCont?id=${course.id}" class="download"><button class="viewButtonEdit">編輯</button></a>
							</c:if>
						</div>
					</div>
				</div><!-- list-screen -->
			</div>
			<div class="share2 clearfix">
				<div class="container">
					<div class="grid_12 a2a_kit a2a_kit_size_32 a2a_default_style">
						<ul class="list-screen-condition">
							<li class="social">
								<a class="a2a_button_facebook topShare">
									<img src="images/fb.png">
									<img src="images/fb2.png" class="fb2">
									<span>分享</span>
								</a>
							</li>
							<li class="social">
								<a href="javascript:;" class="a2a_button_google_plus topGoogle">
									<img src="images/google.png">
									<img src="images/google2.png" class="google2">
									<span>+1</span>
								</a>
							</li>
							<li class="social">
								<a href="javascript:;" class="topLove ${course.favoriteClass}" data-id="${course.id}" data-show="${course.favoriteFlag}" data-type="1" data-check="true">
									<img src="images/love.png" style="display:${course.favoriteString1};">
									<img src="images/love2.png" class="love2" style="display:${course.favoriteString2};">
									<span>喜愛</span>
								</a>
							</li>
							<li class="social">
								<a href="javascript:;" class="topCollect ${course.collectClass}" data-id="${course.id}" data-show="${course.collectFlag}" data-type="1" data-check="true">
									<img src="images/collect.png" style="display:${course.collectString1};">
									<img src="images/collect2.png" class="collect2" style="display:${course.collectString2};">
									<span class="collected">${course.collectString}</span>
								</a>
							</li><!-- 
							<li class="social">
								<a href="javascript:;" class="topClassify">
									<img alt="collect" src="images/classify.png">
									<span>分類</span>
								</a>
							</li> -->
						</ul>
				        <c:if test="${course.downloadUrl != '' || course.fileUrl != ''}">
							<a href="${course.isFile==1?course.downloadUrl:course.fileUrl}" target="_blank" class="download"><button class="downloadButton">下載</button></a>
						</c:if>
						<c:if test="${course.demo != ''}">
							<a href="${course.demo}" class="download" target="_blank"><button class="viewButton">展示</button></a>
						</c:if>
						<c:if test="${course.writerFlag}">							
							<a href="modiCourseCont?id=${course.id}" class="download"><button class="viewButtonEdit">編輯</button></a>
						</c:if>

					</div>
				</div>
			</div><!-- list-screen -->
			<div class="courseShow">
				<div class="courseHeader">
					<div class="container">
						<div class="grid_7">			
							<!-- <span class="time">2014/07/02</span> -->
							<h1>${course.title}</h1>
							<span>分類: </span>
							<a href="${course.categoryUrl}" class="sort">
								${course.category1Name} / ${course.category2Name}
							</a>
							<c:if test="${course.isWriter != 1}">
								<span>原作者: </span>
								<a href="${course.writerUrl}">${course.writer}</a>
							</c:if>
							<span>發佈時間: </span>
							<span class="time">${course.createDateString}</span>
							<ul class="tools clearfix">
								<li>
									<img src="images/view.png" class="view">
									<span>${course.viewCount}</span>
								</li>
								<li>
									<img src="images/cmnt.png" class="cmnt"> 
									<span>${course.commentCount}</span>
								</li>
								<li>
									<img src="images/like.png" class="like"> 
									<span id="likeCount">${course.favoriteCount}</span>
								</li>
							</ul>
						</div>
						<div class="grid_5">
							<c:if test="${!member.myselfFlag}">
							<div class="author_contact">
								<!-- <a href="#"><span>私訊</span></a> -->
								<a href="javascript:;" class="follow ${member.followClass}" data-id="${member.memberNO}" data-show="${member.followFlag}" data-check="true">
									<span class="focus">+關注</span>
								</a>
							</div>
							</c:if>
							<a href="aboutme?id=${member.memberNO}" class="author_img">
								<img src="${member.photoPath}">
							</a>
							<div class="author_info">
								<a href="aboutme?id=${member.memberNO}" class="author_info_name">${member.name}</a>
								<p>${member.job}</p>
								<p class="fans">
									<span class="fansCount" id="fansCount">${member.fansCount}</span>粉絲/${member.followCount}關注
								</p>	
							</div>

						</div>
					</div><!-- //.container -->
				</div><!-- //.courseInfo -->

				<div class="courseDetail">
					<div class="container">
						<div class="prefix_1 grid_10 suffix_1 detailMinHeight">
							${course.content}
						</div>
					</div><!-- //.container -->
					<div class="fullbackground">
						<div class="container">
							<div class="grid_4">
								<div>
									<p class="practiceP">
										上完課程~記得上傳你練習的成果<br/>也可以探索>>>>
										<c:if test="${fn:length(design)>0}">
										<a href="practice?id=${course.id}">&nbsp;所有創意練習!</a>
										</c:if>
									</p>
									<a href="addPracticeCont?cid=${course.id}" class="practiceBtn"><span>我要上傳練習</span></a>
								</div>
							</div>		
							<div class="grid_8">
							<c:if test="${fn:length(design)>0}">	
							    <a class="prev browse left"></a>
							    <div class="scrollable" id="scrollable">

									<div class="items">
								        <div>
										<c:forEach var="i" begin="0" end="${fn:length(design)}">
											<a href="showDesign?id=${design[i].id}">
												<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${design[i].imagePath}">
											</a>
											${(i+1)%3==0?'</div><div>':''}
										</c:forEach>
								        </div>
							      	</div>

							    </div>
							    <a class="next browse right"></a>
							</c:if>
							</div><!-- //.grid_8 -->	
						</div>	<!-- //.container -->	
					</div><!-- fullbackground -->
				</div><!-- //.courseDetail -->
				<div class="courseResponse">
					<div class="container">
						<ul class="tag grid_12">
							<c:forEach items="${tagList}" var="tag">
								<li><a href="javascript:;"><span>${tag.tag}</span></a></li>
							</c:forEach>
							<li class="report">
								<c:choose>
									<c:when test="${!course.reportFlag}">
										<a href="#" class="inline" data-reveal-id="report" data-id="${course.id}" data-type="1"><span>檢舉</span></a>
									</c:when>
									<c:otherwise>
										<span>已檢舉</span>
									</c:otherwise>
								</c:choose>
							</li>
						</ul>
						<div class="grid_8">
							<form class="clearfix" id="commentForm" action="addComment" method="post">
								<input type="hidden" name="id" value="${course.id}">
								<input type="hidden" name="type" value="1">
								<textarea name="content" cols="30" rows="10" placeholder="我想留言...."></textarea>
								<button class="responseButton">留言</button>
							</form>
							<ul class="response clearfix" id="commentArea">
							<c:forEach items="${commentList}" var="comment">
								<li class="clearfix" id="comment${comment.id}">
									<a href="aboutme?id=${comment.member.memberNO}" class="responseImg">
										<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${comment.member.photoPath}" alt="${comment.member.name}">
									</a>
									<div class="responseBox">
										<a href="javascript:;" class="responseUsr">${comment.member.name}</a>
										<p class="reponseCont">${comment.content}</p>
										<p class="reponseBottom">
											<span>${comment.createDateString}</span>
											<span class="reply" style="display: inline;">
												<a href="javascript:;" class="replyBtn" data-check="true" data-id="${comment.id}">回覆</a>
												<c:choose>
													<c:when test="${!comment.reportFlag}">
														<a href="#" class="inline" data-reveal-id="report" data-id="${comment.id}" data-type="5"><span>檢舉</span></a>
													</c:when>
													<c:otherwise>
														<a href="javascript:;"><span>已檢舉</span></a>
													</c:otherwise>
												</c:choose>
												<c:if test="${comment.deleteFlag}">
													<a href="javascript:;" class="deleteBtn" data-id="${comment.id}">刪除</a>
												</c:if>
											</span>
										</p>
									</div>
									<c:forEach items="${comment.replyCommentList}" var="replyComment">
									<div class="responseBox2">
										<a href="aboutme?id=${replyComment.member.memberNO}" class="responseBox2Img">
											<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${replyComment.member.photoPath}" alt="${replyComment.member.name}">
										</a>
										<div class="responseBox2_1">
											<a href="javascript:;" class="responseUsr">${replyComment.member.name}</a>
											<p class="reponseCont">${replyComment.content}</p>
											<p class="reponseBottom clearfix">
												<span>${replyComment.createDateString}</span>
												<span class="reply" style="display: inline;">
													<c:choose>
														<c:when test="${!replyComment.reportFlag}">
															<a href="#" class="inline" data-reveal-id="report" data-id="${replyComment.id}" data-type="5"><span>檢舉</span></a>
														</c:when>
														<c:otherwise>
															<a href="javascript:;"><span>已檢舉</span></a>
														</c:otherwise>
													</c:choose>
													<c:if test="${replyComment.deleteFlag}">
													<a href="javascript:;" class="deleteBtn" data-id="${replyComment.id}">刪除</a>
													</c:if>
												</span>
											</p>
										</div>
									</div>
									</c:forEach>
								</li>
							</c:forEach>
								
							</ul>
							<div class="pageresponse clearfix">
								<c:if test="${page.show}">
								<ul>
									<c:forEach items="${page.pagerList}" var="pager">
										<li class="${pager.indexClass}"><a href="${pager.url}">${pager.index}</a></li>
									</c:forEach>			
					            </ul>
					            </c:if>
					        </div><!-- page -->
						</div>

						<div class="grid_4">
							<c:forEach items="${courseList}" var="topCourse" varStatus="i">
							<div class="grid_2 ${topCourse.classString}">
								<a href="showCourse?id=${topCourse.id}" target="_blank" class="refCourse">
									<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${topCourse.imagePath}">
								</a>
							</div>
							</c:forEach>
							<c:if test="${fn:length(courseList) > 0}">
							<div class="grid_2 modify2">
								<a href="${course.moreUrl}" target="_blank" class="arrow">${course.moreString}</a>
							</div>
							</c:if>
							<div class="grid_4 modify">
								<a href="addCourseCont" class="refCourse addPractice"><span>我也要上傳課程</span></a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- //.courseShow -->
		</div><!-- content -->
		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->

	<div><a href="#" id="gotop">回頂端</a></div>
	
	
	
	
	
	<div id="report" class="reveal-modal">
		<header class="reveal-modal-header">
			檢舉理由：(請點選或填寫內容)
		</header>
		<div class="cont clearfix">
			<form id="sendForm" method="post" action="addReport">
				<input type="hidden" name="id" id="id">
				<input type="hidden" name="type" id="type">
				<p>
					<label for="reason1"><input id="reason1" type="radio" name="reason" value="廣告或垃圾訊息">廣告或垃圾訊息</label>
					<label for="reason2"><input id="reason2" type="radio" name="reason" value="色情或低俗内容">色情或低俗内容</label>
					<label for="reason3"><input id="reason3" type="radio" name="reason" value="其他原因">其他原因</label>
					<label id="msg"></label>
				</p>
				<textarea name="remark" id="remark" cols="30" rows="10" style="margin-top: 10px;width: 100%;height:100px;
				background: #fff;border-top: 1px solid #c9c9c8;border-left: 1px solid #dfe0de;border-right: 1px solid #dfe0de;border-bottom: 1px solid #eee;border-radius: 3px;box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);"></textarea>
				<button type="submit" style="width: 70px;height: 40px;background: #177aad;float: right;display: block;color: #fff;border-radius: 3px;font-size: 14px;text-align: center;margin-top: 10px;">送出</button>
			</form>
		</div>
	</div>
	
	<form method="post" id="replyForm" action="replyComment">
		<input type="hidden" name="id" value="${course.id}">
		<input type="hidden" name="type" value="1">
		<input type="hidden" id="topID"  name="topID">
		<input type="hidden" id="content" name="content">
	</form>
	
	<form method="post" id="delForm" action="delComment">	
		<input type="hidden" name="type" value="1">
		<input type="hidden" name="commentID" id="commentID">
	</form>
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
	<script src="js/listscreen.js"></script>
	<script src="js/ourjquery.js"></script>
	<!--scrollable-->
	<script src="js/jquery.tools.min.js"></script>
	<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	
	
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>
	<!-- Reveal Modal -->
	<script type="text/javascript" src="js/jquery.reveal.js"></script>	
	<!-- common -->
    <script src="js/common.js"></script>
	<!-- comment -->
    <script src="js/comment.js"></script>
    <!-- highlightjs -->
    <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
	<script>
	
	$(function() {
		hljs.initHighlightingOnLoad();
		$('nav#menu').mmenu();
      	$(".scrollable").scrollable({circular: true}).autoscroll({ autoplay: true });
		
		
		$("#sendForm").validate({
			rules:{
				reason:"required"
			},
			errorPlacement: function (error, element) {
				if(element.attr('name') == "reason"){
					$("#msg").append(error);
				}
			}
		});
		
		$("#commentForm").validate({
			rules:{
				content:"required"
			}
		});
		
		$(".inline").click(function(){
			$("#id").val($(this).attr("data-id"));
			$("#type").val($(this).attr("data-type"));
		});
		
		$(".deleteBtn").click(function(){
			var flag = confirm("是否刪除留言?");
			if(flag){
				$("#commentID").val($(this).attr("data-id"));
				$("#delForm").submit();
			}
		});
		
		
    });
	</script>	
</body>
</html>